<template>
  <div class="bg-white full-height padding-b-10">
    <div class="info-main-header">维修费用统计</div>
    <div class="chart" ref="chart" id="chart" />
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'cost',
  data () {
    return {
      chart: null
    }
  },
  mounted () {
  },
  methods: {
    initData (val) {
      this.$nextTick(() => {
        if (this.chart === null) {
          this.chart = echarts.init(this.$refs.chart)
        }
        const option = this.getLineOption(val)
        this.chart.setOption(option)
      })
    },
    getLineOption (val) {
      const date = val.map(v => v.date)
      const averageCost = val.map(v => v.averageCost)
      const totalCost = val.map(v => v.totalCost)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['总维修费用', '单次维修费用']
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#D3D3D3'
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: date
          }
        ],

        yAxis: [
          {
            type: 'value',
            name: '元',
            nameTextStyle: {
              color: '#333333',
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333333'
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            }
          },
          {
            type: 'value',
            name: '元/次',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            },
            nameTextStyle: {
              color: '#333333',
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333333'
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '总维修费用',
            type: 'bar',
            barWidth: 16,
            data: totalCost,
            itemStyle: {
              normal: {
                color: '#36B3F2'
              }
            }
          },
          {
            name: '单次维修费用',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#16BFBF',
                borderWidth: 2,
                borderColor: '#16BFBF'
              }
            },
            data: averageCost
          }
        ]
      }
      return option
    }
  }
}
</script>
<style scoped lang="stylus">

.chart{
  height calc(100% - 60px)
  width 100%
}

</style>
